<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table border="1">
            <thead><tr><th>Fruit</th><th>Color</th></tr></thead>
            <tbody id="fruitsBody">
                <tr id="targetrow"><td>Placeholder</td></tr>
            </tbody>
        </table>

        <p>
            <button id="ab">After Begin</button>
            <button id="ae">After End</button>
            <button id="bb">Before Begin</button>
            <button id="be">Before End</button>
        </p>
        <script>
            var target = document.getElementById("targetrow");
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }

            function handleButtonPress(e) {
                if (e.target.id == "ab") {
                    target.insertAdjacentHTML("afterbegin", "<td>After Begin</td>");
                } else if (e.target.id == "be") {
                    target.insertAdjacentHTML("beforeend", "<td>Before End</td>");
                } else if (e.target.id == "bb") {
                    target.insertAdjacentHTML("beforebegin",
                        "<tr><td colspan='2'>Before Begin</td></tr>");
                } else {
                    target.insertAdjacentHTML("afterend",
                        "<tr><td colspan='2'>After End</td></tr>");
                }
            }

        </script>
    </body>
</html>
